<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table id="tbl">
		<thead></thead>
		<tbody>
			<tr>
				<td>iphone6</td>
				<td>4488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>4488</td>
			</tr>
			<tr>
				<td>iphone7</td>
				<td>5488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>5488</td>
			</tr>
			<tr>
				<td>iphone8</td>
				<td>6488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>6488</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">总计:</td>
				<td id="total">0</td>
			</tr>
		</tfoot>
	</table>
	
	<script type="text/javascript">
		var buts=document.getElementsByTagName("button");		
		for(var i=0;i<buts.length;i++){
			buts[i].onclick=function(){
				if(this.innerHTML=="+"){
					smallprice(this,1);//调用计算小计函数，传入不同参数为了实现细微差别的操作													
			}				
				if(this.innerHTML=="-"){
					smallprice(this,-1);//调用计算小计函数，传入不同参数为了实现细微差别的操作																													
				}											
				allprice();//调用计算总计函数，每次按动按钮重新计算
			}			
		}		
		allprice();//调用计算总计函数，刷新网页显示总计



		//计算总计函数
		function allprice(){
				var tbody=document.getElementsByTagName("tbody")[0];
				var trs=tbody.children;
				for(var j=0,sum=0;j<trs.length;j++){
					sum+=parseInt(trs[j].lastElementChild.innerHTML);
				}
				console.log(sum);
				total.innerHTML=sum;
		}
		
		
		//计算小计函数
		function smallprice(butt,num){			
				if(num==1){
					//数目获取
					var span=butt.previousElementSibling;
					//数目加
					var spanX=parseInt(span.innerHTML)+num;
					//获取单价
					var price=parseInt(butt.parentNode.previousElementSibling.innerHTML); 
					//小计
					var smallprice=butt.parentNode.nextElementSibling;	
					if(spanX>0){
						//先把新的数目赋值回去
						span.innerHTML=spanX;
						//利用刚才得到的数目计算小计
						smallprice.innerHTML=price*spanX;		
					}			
				}				
				if(num==-1){
					//数目获取
					var span=butt.nextElementSibling;
					//数目减
					var spanX=parseInt(span.innerHTML)+num;
					//获取单价
					var price=parseInt(butt.parentNode.previousElementSibling.innerHTML); 
					//小计
					var smallprice=butt.parentNode.nextElementSibling;	
					if(spanX>0){
						//先把新的数目赋值回去
						span.innerHTML=spanX;
						//利用刚才得到的数目计算小计
						smallprice.innerHTML=price*spanX;		
					}			
				}				
		}
	</script>
	</body>
</html>
